<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>编辑文章</title>
    <link rel="shortcut icon" href="/image/favicon.ico" />

    <link href="/froala/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/froala/css/froala_editor.min.css" rel="stylesheet" type="text/css">

    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/toastr.css" rel="stylesheet">

    <style>
        body {
            text-align: center;
        }

        section {
            width: 100%;
            height:100%;
            margin: auto;
            text-align: left;
        }
        .modal-dialog .modal-content{
            width: 220%;
            position: absolute;
            margin-left: -300px;
        }
    </style>
</head>

<body>
<!-- 共享书籍 -->
    <div class="modal-dialog modal-notify modal-success" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <p class="heading lead">发表文章 </p>
            </div>
            <!--Body-->
            <div class="modal-body">
                <div class="text-center">
                    <div class="col-md-12 col-xl-12">
                        <form>
                            <!--Grid row-->
                            <div class="row">
                                <!--Grid column-->
                                <div class="col-md-6">
                                    <div class="md-form">
                                        <div class="md-form">
                                            <input type="hidden" id="id" class="form-control" th:value="${article.articleId}"/>
                                            <input type="text" id="title" class="form-control" th:value="${article.title}"/>
                                            <label for="title" class="">标题</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Grid column-->
                                <!--Grid column-->
                                <div class="col-md-6">
                                    <div class="md-form">
                                        <div class="md-form">
                                            <input type="text" id="cover" class="form-control" th:value="${article.cover}"/>
                                            <label for="cover" class="">封面</label>
                                        </div>
                                    </div>
                                </div>
                                <!--Grid column-->
                            </div>
                            <!--Grid row-->
                            <!--Grid row-->
                            <div class="row">
                                <!--Grid column-->
                                <div class="col-md-12">
                                    <div class="md-form">
                                        <textarea id='edit' style="margin-top: 30px;" th:text="${article.content}"></textarea>
                                    </div>
                                </div>
                            </div>
                            <!--Grid row-->

                        </form>
                    </div>
                </div>
            </div>

            <!--Footer-->
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-success waves-effect waves-light" onclick="submitArticle()" data-dismiss="modal">
                    <i class="fa fa-check ml-1"></i>
                    确定
                </a>
                <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">
                    <i class="fa fa-times l-1"></i>
                    取消
                </a>
            </div>
        </div>
        <!--/.Content-->
    </div>




<script src="/froala/js/libs/jquery-1.11.1.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="/froala/js/froala_editor.min.js"></script>
<!--[if lt IE 9]>
<script src="/froala/js/froala_editor_ie8.min.js"></script>
<![endif]-->
<script src="/froala/js/plugins/tables.min.js"></script>
<script src="/froala/js/plugins/lists.min.js"></script>
<script src="/froala/js/plugins/colors.min.js"></script>
<script src="/froala/js/plugins/font_family.min.js"></script>
<script src="/froala/js/plugins/font_size.min.js"></script>
<script src="/froala/js/plugins/block_styles.min.js"></script>
<script src="/froala/js/plugins/media_manager.min.js"></script>
<script src="/froala/js/plugins/video.min.js"></script>
<script src="/froala/js/langs/zh_cn.js"></script>

<!-- Bootstrap core JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdn.bootcss.com/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>

<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script>
    $(function () {
        $('#edit').editable({
            inlineMode: false,
            language: 'zh_cn'
        })
    });


    /**
     * 用户提交文章
     */
    function submitArticle() {
        var id = $("#id").val();
        var title = $("#title").val();
        var cover = $("#cover").val();
        var content = $("#edit").val();
        if (title.trim().length === 0) {
            toastr.error("请填写标题 ！");
            return;
        }
        if (content.length === 0) {
            toastr.error("请填写文章内容 ！");
            return;
        }
        $.post("/admin/article_save", {
            id: id,
            title: title,
            cover: cover,
            content: content
        }, function (response) {
            if (response.code === 0) {
                $('#id').val('');
                $('#title').val('');
                $('#cover').val('');
                $('#edit').val('');
                toastr.success("感谢您的分享，文章已发表成功！");
                var send = function () {
                    //回退到上一页
                    window.history.back(-1);
                    window.location.reload();
                };
                setTimeout(send, 3000);
            } else {
                toastr.error("发表失败，请用其他方式联系我们！");
            }
        });
        return false;
    }
</script>
</body>
</html>
